{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
图灵课程 - 个人信息


{% endblock %}
{% block style %}

<script type="text/javascript" src="/static/js/browser.min.js"></script>
<script type="text/javascript" src="/static/js/react.js"></script>
<script type="text/javascript" src="/static/js/react-dom.js"></script>
<link rel="stylesheet" href="/static/css/cropper.css">
<link rel="stylesheet" href="/static/css/myCrop.css">
{% endblock %}
{% block content %}
<div id="AvatarDiv" style="position:fixed;
display:none;
width:100%;
height:100%;
z-index:9999;
opacity:0.6;
background-color: white;
top:0;
left:0;">
</div>
<div id="modifyDiv" style="position:fixed;
display:none;
width:100%;
height:100%;
z-index:9999;
opacity:0.6;
background-color: white;
top:0;
left:0;">
</div>
<div class="container question" style="margin-top: 20px">

	<ul class="nav nav-tabs" role="tablist" id="myTab">
		<li role="presentation" ><a href="#news" id="news-tab" aria-controls="news" data-toggle="tab" class="active">最新动态</a></li>
		<li role="presentation" ><a href="#basics" id="basics-tab" aria-controls="basics" data-toggle="tab">个人信息</a></li>
		<li role="presentation" ><a href="#topics" id="topics-tab" aria-controls="topics" data-toggle="tab">查看标签</a></li>
	</ul>


<div id="myTabContent" class="tab-content"  align="center" style="margin-top: 10px">
		<div role="tabpanel" class="tab-pane fade in active" id="news" aria-labelledBy="news-tab">
				<!--
				<div class="pull-right">
        	<span>选择统计范围：</span>
        	<script type="text/javascript" src=" {% static 'js/year_month_day.js' %}" ></script>
					<select id="selYear_from"></select>
					<select id="selMonth_from"></select>
					<select id="selDay_from"></select>
					<script type="text/javascript">
						var selYear_from = window.document.getElementById("selYear_from");
						var selMonth_from = window.document.getElementById("selMonth_from");
						var selDay_from = window.document.getElementById("selDay_from");
						new DateSelector(selYear_from, selMonth_from, selDay_from, 2016, 2, 29);
					</script>
					<span>&emsp;—&emsp;</span>
					<select id="selYear_to"></select>
					<select id="selMonth_to"></select>
					<select id="selDay_to"></select>
					<script type="text/javascript">
						var selYear_to = window.document.getElementById("selYear_to");
						var selMonth_to = window.document.getElementById("selMonth_to");
						var selDay_to = window.document.getElementById("selDay_to");
						new DateSelector(selYear_to, selMonth_to, selDay_to, 2016, 2, 29);
					</script>
				</div>
			-->
			<div style="margin-top: 10px">
				<div class="panel panel-default">
					<div class="panel-body">
						<label style="font-size: 25px;color: #930000;">{{point}}</label>
						<br>
						<label>当前用户积分 = 0.3 * 总回答数 + 0.5 * 获得赞的个数 + 0.2 * 总提问数</label>
					</div>
				</div>
			</div>

			<br>

			<div class="statistics container">
				<div class="col-md-4 statistics_sort" >
					总提问数：{{questionNum}}
				</div>

				<div class="col-md-4 statistics_sort">
					获得赞数：{{praiseNum}}
				</div>

				<div class="col-md-4 statistics_sort" style="border-right: 0px ">
					总回答数：{{answerNum}}
				</div>
			</div>
			<br>

			<div>
				<div id="PersonalInfo_container"></div>
			</div>

			<div style="background:url(../../static/image/maple.png) repeat-x">&nbsp; </div>

			<!-- 时间线 -->
			<div style="margin-top: 10px">
				<div class="panel panel-default">
					<div class="panel-body">
						{% for i in list %}
						<a href="/QuestionDetails/?id={{i.questionID}}">问题：{{i.questionAbstract}} 有新回复啦！</a><div style="border-bottom: 1px solid #eee; "> </div>
						{% endfor %}

						{% if not list %}
						<p style="font-size: 16px;">暂时没有新回复！</p>
						<div style="border-bottom: 1px solid #eee; "> </div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>

<div role="tabpanel" class="tab-pane fade" id="basics" aria-labelledBy="basics-tab">
		<div style="color: inherit; padding: 15px" align="center" class="basics_info container">

					<table>

						<div class="basics_mess_img">
							{% if avatar %}
							<img id="avatar" src="{{avatar}}" class="img-responsive" alt="" style="width:150px;height:150px">
							{% else %}
							<img id="avatar" src="/static/image/111.png" class="img-responsive" alt="" >
							{% endif %}
						</div><br>

						<div class="basics_mess_total">
							<div  class="basics_mess" >
								<span class="glyphicon glyphicon-user"></span>&nbsp;用户名:
							</div>
							<div class="basics_mess_right">
								<span id='username'>{{user.UserID}}</span>
								<input id="username_in" type="text" value="{{user.UserID}}" style="display:none;">
							</div>


							<div  class="basics_mess" >
								<span class="glyphicon glyphicon-heart-empty"></span>&nbsp;昵称:
							</div>
							<div class="basics_mess_right">
								<span id="nickname">{{user.NickName}}</span>
								<input id="nickname_in" type="text" value="{{user.NickName}}" style="display:none;">
							</div>


							<div  class="basics_mess" >
								<span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱:
							</div>
							<div class="basics_mess_right">
								<span id="email">{{user.UserEmail}}&nbsp;</span>
								<input id="email_in" type="text" value="{{user.UserEmail}}" style="display:none;">
							</div>

							<div  class="basics_mess" >
								<span class="glyphicon glyphicon-comment"></span>&nbsp;QQ:
							</div>
							<div class="basics_mess_right">
								<span id="qq">
									{{user.UserQQ}}
									{% if not user.UserQQ %}
									暂未设置
									{% endif %}
								</span>
							</div>

							<div  class="basics_mess" >
								<span class="glyphicon glyphicon-phone"></span>&nbsp;手机号码:
							</div>
							<div class="basics_mess_right">
								<span id="telephone">
									{{user.MobilePhone}}
									{% if not user.MobilePhone %}
									暂未设置
									{% endif %}
								</span>
							</div>
						</div>
					</table>

			<div id="AvatarReg" style="position: absolute;
				display: none;
				left: 30%;
				top: 60%;
				background: white;
				width: 40%;
                height: auto;
				border: 3px solid #444;
				border-radius: 7px;
				z-index: 10000;">
					<span>点击选择照片后，不同浏览器加载时间不同，请耐心等待一段时间，切勿多次点击“选择照片”按钮</span>
					<div style="margin-top: 50px; margin-bottom: 20px;">
						<input id="photoBtn" type="button" onclick="document.getElementById('inputImage').click()"  class="upload-button" value="选择照片"><!-- 可以增加自己的样式 -->
						<input  id="inputImage"  type="file" accept="image/*" style="display: none;"/>
				  		<img  id="showImg" />
					</div>
					<div class="container" style=" padding: 0;margin: 0;position:fixed;display: none;top: 0;left: 0;z-index: 200;" id="containerDiv">
					    <div class="row" style="display: none;" id="imgEdit">
					      <div class="col-md-9">
					        <div class="img-container">
					          <img src="" alt="Picture">
					        </div>
					      </div>
					    </div>
					    <div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">
					      <div class="col-md-9 docs-buttons" >
					        <div class="btn-group" >
					          <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy" style="height: auto;">
					            <span class="docs-tooltip" data-toggle="tooltip" >
					              <span class="fa fa-power-off" >取消</span>
					            </span>
					          </button>
					        </div>

					        <div class="btn-group btn-group-crop " style="float: right;">
					          <button type="button" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }" style="height: auto;margin-right: 17px;">
					            <span class="docs-tooltip" data-toggle="tooltip" title="">确认</span> <!--cropper.getCroppedCanvas({ width: 320, height: 180 }) -->
					          </button>
					        </div>

					      </div><!-- /.docs-buttons -->
					    </div>
				  </div>
						<button id="updateAvatar" style="margin:0 auto; margin-bottom:10px;" class="upload-button">
							上传
						</button>
						<button onclick="cancelAvatar()" style="margin:0 auto; margin-bottom:10px;" class="upload-button" >
							取消
						</button>
        <br>

			</div>

			<div id="modifyReg" style="position: absolute;
				display: none;
				left: 30%;
				top: 60%;
				background: white;
				width: 40%;
                height: auto;
				border: 3px solid #444;
				border-radius: 7px;
				z-index: 10000;">
				<div style="margin: 10px 10px; padding-top:50px; padding-bottom:50px;  text-align: center;">

					<form  action="/ModifyData/" method="post">
            <div class="basics_mess_total" >
            <div  class="basics_mess" >
							<span class="glyphicon glyphicon-phone"></span>&nbsp;手机号码：
						</div>
						<div class="basics_mess_right">
                            {% if user.MobilePhone %}
                            <input id="telephone_in" type="text" name="telephone" value="{{user.MobilePhone}}" >
                            {% else %}
                            <input id="telephone_in" type="text" name="telephone" placeholder="暂未设置" >
                            {% endif %}
            </div>
						<br>
            <div  class="basics_mess" >
							<span class="glyphicon glyphicon-comment"></span>&nbsp;QQ号码：
						</div>
						<div class="basics_mess_right">
                            {% if user.UserQQ %}
                            <input id="qq_in" type="text" name="qq" value="{{user.UserQQ}}" >
                            {% else %}
                            <input id="qq_in" type="text" name="qq" placeholder="暂未设置" >
                            {% endif %}
            </div>
						</div>
						<input type="submit" value="确认修改" class="upload-button">

					</form>
					<button onclick="$('#modifyReg').slideToggle(500);$('#modifyDiv').css('display','none');" style="margin:0 auto;" class="upload-button">
						取消
					</button>
				</div>
			</div>
			<br>
			<button onclick="$('#modifyReg').slideToggle(500);$('#modifyDiv').css('display','inline');" class="personal-button" >
				编辑资料
			</button>
			<button onclick="$('#AvatarReg').slideToggle(500);$('#AvatarDiv').css('display','inline');"  class="personal-button" id="modifyAvatar">修改头像</button>

		</div>

</div>
<div role="tabpanel" class="tab-pane fade" id="topics" aria-labelledBy="topics-tab">
	<div class="topics">
		<div id="tags"></div>
		<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-plus"></span></button>
		<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-minus"></span></button>
	</div>

</div>

</div>

<!--a href="/Accounts/logout/" type="button" class="pull-right" style="margin-top: 50px">退出</a-->
</div>




{% endblock %}
{% block other_script %}
<script type="text/javascript" src = "{% static 'js/personalInfo.js' %}"></script>
<script type="text/javascript" src = "{% static 'js/highcharts.js' %}"></script>
<script type="text/javascript" src="/static/js/exif.js"></script>
<script type="text/javascript" src="/static/js/cropper.js"></script>
<script type="text/javascript" src="/static/js/myCrop.js?v=1.0.4"></script>
<script type="text/babel" src="/static/js/PersonalTag.js"></script>
<script type="text/javascript">
	var fileImg = "";

	$(function(){

		$("#imgCutConfirm").bind("click",function(){
			 $("#containerDiv").hide();
         	 $("#imgEdit").hide();
         	 $("#getCroppedCanvasModal").modal("hide");
		})
	})

function cancelAvatar() {
	window.location = '/PersonalInfo/';
}
	$('#myTab a').click(function (e) {
		e.preventDefault()
		$(this).tab('show')
	})

	//$('#myTab a[href="#news"]').tab('show') // Select tab by name
	$('#myTab li:eq(0) a').tab('show') // Select first tab
	//$('#myTab li:eq(1) a').tab('show') // Select last tab
	//$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

</script>

<script>
/**/
$(function () {
    $('#PersonalInfo_container').highcharts({
    	credits: {
            enabled: false
        },
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '【图灵线上系统】个人信息统计 - 数量（个数）'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '数量：{point.y}个'
                }
            }
        },
        tooltip: {
        	headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '数量: <b>{point.y} 个</b>'
        },
        colors: ["#c2ddb3", "#e9e3c2", "#f2ddc9", "#d1cbb4", "#d1c6d1", "#d7d8d9", "#c8d2c7"],
        series: [{
            name: '统计：',
            data: [
                ['总回答数', {{answerNum}}],
                ['获得赞数', {{praiseNum}}],
                ['总提问数', {{questionNum}}]
            ],
        }]
    });
});


</script>


{% endblock %}
